<template>
  <div id="mySigned">
     <x-header title="每日签到" :right-options="{showMore: false}" @on-click-more="show = true"></x-header> 
        <div class="signed_wrap">
               <img src="static/bottom/qiandaobtn.png" alt="" @click="todaySigned"> 
               <div style="margin-top:-50px">您已连续签到<span style="color:#ff3b3b">{{lianxuDayNum}}</span>天</div>
        </div>
        <div class="signedsteap">
              <flow >
                <flow-state state="1" :title="('Paid')" is-done></flow-state>
                <flow-line is-done></flow-line>
                <flow-state state="2" is-done>
                    <span slot="title">{{ ('Shipped') }}</span>
                </flow-state>
                <flow-line  :tip="('In progress')"></flow-line>

                <flow-state state="3" :title="('Delivered')"></flow-state>
                <flow-line></flow-line>

                <flow-state state="4" :title="('Done')"></flow-state>

            </flow>
                                                                                                                                            
        </div>
        <div class="signedForm">
            <p>签到规则</p>
            <p>1.每天签到奖励积分5分;</p>
            <p>2.连续七天以上签到可获得10积分;</p>
            <p>3.连续签到30天送20积分。如果中断签到，又会从1积分开始</p>
        </div>
        <!-- 签到成功弹框 -->
          <div v-transfer-dom>
            <x-dialog v-model="showDialogStyle" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '40%', 'background-color': 'transparent'}">
                <p style="color:#fff;text-align:center;" @click="showDialogStyle = false">
                <!-- <div class="lingqu" @click="go_ling">立即领取</div> -->
                <span>
                <img src="static/bottom/qdcg.png" style="max-width:60%">            
                </span>
                <br>
                <br>
                <x-icon type="ios-close-outline" style="fill:#fff;">
                    <span class="vux-close"><img src="static/cart/i_ico_del.png" alt=""></span>
                </x-icon>
                </p>
            </x-dialog>
          </div>
            <alert v-model="tankuang" :title="('提示')" @on-show="onShow" @on-hide="onHide"> {{meaasge}}</alert>

  </div>
</template>

<script>
import {
  XHeader,
  InlineLoading,
  Flow,
  FlowState,
  FlowLine,
  XDialog,
  Alert
} from "vux";
import OrderPage from "../../components/toolComponent/myOrderPage.vue";
import evaluatePage from "../../components/toolComponent/myEvaluate";
import { homeUrl } from "../../components/utils/utils.js";
import axios from "axios";
import qs from "qs";
//   import Top from '../components/layouts/top.vue'
//   import Bottom from '../components/layouts/bottom.vue'
export default {
  components: {
    XHeader,
    OrderPage,
    evaluatePage,
    InlineLoading,
    Flow,
    FlowState,
    FlowLine,
    XDialog,
    Alert
  },
  data() {
    return {
      evalDatas: [],
      showDialogStyle: false,
      wxOpenId: localStorage.getItem("openid"),
      tankuang: false,
      lianxuDayNum:'',
      meaasge: ""
    };
  },
  methods: {
    //今日签到
    todaySigned() {
      var datas = qs.stringify({
        wxid: "oCBm3vxlqwJjUbBDshKiQ50IFSjs"
      });
      axios
        .post(homeUrl() + "getUserQianDaoTime/", datas, { emulateJSON: false })
        .then(
          result => {
            console.log(";;;");
            console.log(result);
            console.log(result.data.data.qiandaoTime)
            this.lianxuDayNum = result.data.data.qiandaoDays;
            if (result.data.status == "ok") {
              if (result.data.data.qiandaoTime == this.getNowFormatDate()) {
                this.tankuang = true;
                
                this.meaasge = "您今天已经签到过，不可重复签到";
              } else {
                var jsTime = this.getNowFormatDate().split("-");
                var severTime=result.data.data.qiandaoTime.split("-");
                // var jsTime = ["2018", "3", "1"];
                // var severTime = ["2018", "2", "28"];
                console.log(Number(jsTime[2]));
                console.log(";;");
                console.log(Number(severTime[2]));
                function mGetDate(year, month) {
                  var d = new Date(year, month, 0);
                  return d.getDate();
                }
                let mouthBigDay = mGetDate( //函数当月天数
                  Number(severTime[0]),
                  Number(severTime[1])
                );
                console.log(mouthBigDay);
                if (Number(severTime[0]) == Number(jsTime[0])) { //判断是否同年
                  if (Number(severTime[1]) == Number(jsTime[1])) {//判断是否同月
                    if (Number(severTime[2]) + 1 == Number(jsTime[2])) {//判断是否+1天
                      console.log("连续签到");
                      this.continueQianDao()
                    } else {
                      console.log("不是连续签到");
                      this.modifyQianDao()
                    }
                  } else if (Number(severTime[1]) + 1 == Number(jsTime[1])) {//判断是否隔月+1
                    if (Number(severTime[2]) == mouthBigDay) {//判断是否隔月  31~1日
                      if (Number(jsTime[2]) == 1) {
                        console.log("连续签到");
                        this.continueQianDao()
                      } else {
                        console.log("不是连续签到");
                        this.modifyQianDao()
                      }
                    } else {
                      console.log("不是连续签到");
                      this.modifyQianDao()
                    }
                  } else {
                    console.log("不是连续签到");
                    this.modifyQianDao()
                  }
                } else if (Number(severTime[0]) + 1 == Number(jsTime[0])) {//判断是否隔年+1  2018~2019年
                  if (Number(severTime[1]) == 12 && Number(jsTime[1]) == 1) {
                    if (Number(severTime[2]) == 31 && Number(jsTime[1]) == 1) {
                      console.log("连续签到");
                      this.continueQianDao()
                    } else {
                      console.log("不是连续签到");
                      this.modifyQianDao()
                    }
                  } else {
                    console.log("不是连续签到");
                    this.modifyQianDao()
                  }
                } else {
                  console.log("不是连续签到");
                  this.modifyQianDao()
                }

                // if (Number(severTime[2]) == mouthBigDay) {
                //   if (Number(jsTime[2]) == 1) {
                //     console.log("连续签到");
                //   }
                // } else {
                //   if (Number(jsTime[2]) == Number(severTime[2]) + 1) {
                //     console.log("连续签到");
                //   } else {
                //     console.log("不是连续签到");
                //   }
                // }
              }
            }
          },
          error => {
            this.$vux.toast.text("网络请求失败....", "bottom");
            console.log(error);
          }
        );
    },
    modifyQianDao() {
      console.log(this.getNowFormatDate());
      var datas = qs.stringify({
        wxid: "oCBm3vxlqwJjUbBDshKiQ50IFSjs",
        qianDaoTime: this.getNowFormatDate()
      });
      axios
        .post(homeUrl() + "modifyUserQianDaoTime/", datas, {
          emulateJSON: false
        })
        .then(
          result => {
            console.log(result);
            if (result.data.status == "ok") {
              console.log("签到成功");
              this.addUserJiFen();
            }
          },
          error => {
            this.$vux.toast.text("网络请求失败....", "bottom");
            console.log(error);
          }
        );
    },
    // 连续签到
     continueQianDao() {
      console.log(this.getNowFormatDate());
      var datas = qs.stringify({
        wxid: "oCBm3vxlqwJjUbBDshKiQ50IFSjs",
        qianDaoTime: this.getNowFormatDate(),
        qiandaoDays:0
      });
      axios
        .post(homeUrl() + "modifyUserQianDaoTime/", datas, {
          emulateJSON: false
        })
        .then(
          result => {
            console.log(result);
            if (result.data.status == "ok") {
              console.log("签到成功");
              this.addUserJiFen();
            }
          },
          error => {
            this.$vux.toast.text("网络请求失败....", "bottom");
            console.log(error);
          }
        );
    },
    // 签到成功增加积分
    addUserJiFen() {
      var datas = qs.stringify({
        wxid: this.wxOpenId,
        optionName: JSON.stringify(["jifen"]),
        optionNumber: "[10]"
      });
      axios
        .post(homeUrl() + "addUserSomeNumber/", datas, { emulateJSON: false })
        .then(
          result => {
            console.log(result);
            this.showDialogStyle = true;
            //    if(result.data.status=="ok"){
            //    }
          },
          error => {
            this.$vux.toast.text("网络请求失败....", "bottom");
            console.log(error);
          }
        );
    },
    onHide() {
      console.log("on hide");
    },
    onShow() {
      console.log("on show");
    },
    // 获取日期
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    }
  },
  created() {}
};
</script>

<style>
#mySigned {
  /* width: 100%;
  height: 100%; */
  /* background: #ffffff; */
}
#mySigned .signed_wrap {
  height: 18.75rem;
  background: linear-gradient(
    to right,
    #60c3ec,
    #eed84c
  ); /* 标准的语法（必须放在最后） */
  text-align: center;
  margin-bottom: 10px
}
#mySigned .signed_wrap img {
  width: 260px;
  height: auto;
}
.signedsteap {
  background: #ffffff;
  margin-bottom: 10px;
}
.signedForm {
  padding: 20px 10px 20px 10px;
  background: #ffffff;
  /* height: 30%; */
}
</style>
